// vuex 当中专门管理权限的模块
import { asyncRoutes, constantRoutes } from '@/router'

const state = {
  // 这里用来储存拼接好的菜单, 在页面上显示
  routes: []
}
const mutations = {
  setRoutes(state, data) {
    // 在这里拼接真正的菜单 = 静态路由 + 筛选后的动态路由
    state.routes = [
      ...constantRoutes,
      ...data
    ]
  }
}
const actions = {
  filterRoutes(store, menus) {
    // 过滤路由
    // 我需要当前用户权限列表 menus (调用时传入)
    // 我需要路由列表
    // 过滤路由列表, 如果name 存在于 menus 就能继续存在
    const routes = asyncRoutes.filter(route => {
      return menus.includes(route.name)
    })

    console.log('路由过滤结果', routes)

    // 准备恢复菜单
    store.commit('setRoutes', routes)

    // 这里是 actions 被 dispatch 调用
    // 这里返回的值都能被调用时获取
    return routes
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
